<template>
  <div class="shipRegistry">
    <div id="shipRegistryCount"></div>
  </div>
</template>
<script>
import { getShipAreaStatistics } from "../../api/newEnergyShip";
export default {
  name: "shipRegistry",
  data() {
    return {
      // [
      //         { value: 45, name: "湖北" },
      //         { value: 20, name: "山东" },
      //         { value: 10, name: "安徽" },
      //         { value: 25, name: "其他" },
      //       ]
      shipAreaStatistics: [],
    };
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(
        document.getElementById("shipRegistryCount")
      );
      const data = this.shipAreaStatistics;
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#43ECF9", "#F1B549", "#6CFABC", "#F16252"],
        graphic: {
          elements: [
            {
              type: "text",
              left: "10%",
              top: "center",
              style: {
                text: "船籍港",
                fill: "#FFFFFF",
              },
            },
          ],
        },
        legend: {
          orient: "vertical",
          left: 230,
          y: "center",
          itemWidth: 3,
          itemHeight: 13,
          formatter: function (name) {
           
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            var arr = [
              "{a|" + name + "}",
              "{b|" + ((target / total) * 100).toFixed(0) + "%}",
            ];
            return arr.join("  ");
          },
          textStyle: {
            // 添加
            // padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 12,
                color: "#FFFFFF",
              },
              b: {
                fontSize: 12,
                color: "#FFFFFF",
              },
            },
          },

          // data: ['湖北', '山东', '安徽', '其他']
        },
        series: [
          {
            name: "船籍港",
            type: "pie",
            radius: "90%",
            center: ["40%", "50%"],
            data: data,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    getShipAreaStatisticsData() {
      getShipAreaStatistics().then((res) => {
        console.log(res);
        if (res != null && res.length > 0) {
          this.shipAreaStatistics = res.map((item) => {
            return {
              value: item.count,
              name: item.areaName,
            };
          });
          console.log(this.shipAreaStatistics)
          this.initChart();
        }
      });
    },
  },
  mounted() {
    this.getShipAreaStatisticsData();
  },
};
</script>
<style lang="scss" scoped>
.shipRegistry {
  width: 100%;
  height: calc((100% - 30px) / 2 - 8px);
  background: #0e2551;
  border-radius: 6px;
  padding: 4px 0;
  box-sizing: border-box;
  #shipRegistryCount {
    width: 100%;
    height: 100%;
  }
}
</style>
